<template>
  <div class="encryption-container">
    <h1>加密解密工具</h1>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="MD5加密" name="md5">
        <div class="encryption-section">
          <el-input
            v-model="md5Input"
            type="textarea"
            :rows="4"
            placeholder="请输入要加密的文本"
          />
          <el-button type="primary" @click="handleMd5Encrypt" class="action-button">
            加密
          </el-button>
          <el-input
            v-model="md5Result"
            type="textarea"
            :rows="2"
            placeholder="加密结果"
            readonly
          />
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="SM2加密解密" name="sm2">
        <div class="encryption-section">
          <div class="key-section">
            <el-button type="primary" @click="generateKeyPair" class="action-button">
              生成密钥对
            </el-button>
            <div class="key-display">
              <div class="key-label">公钥（用于加密）</div>
              <el-input
                v-model="publicKey"
                type="textarea"
                :rows="2"
                placeholder="请输入或生成公钥，用于加密数据"
                @input="validatePublicKey"
              />
              <div class="key-hint" v-if="publicKeyError">
                <el-alert :title="publicKeyError" type="error" :closable="false" />
              </div>
              <div class="key-label">私钥（用于解密）</div>
              <el-input
                v-model="privateKey"
                type="textarea"
                :rows="2"
                placeholder="请输入或生成私钥，用于解密数据"
                @input="validatePrivateKey"
              />
              <div class="key-hint" v-if="privateKeyError">
                <el-alert :title="privateKeyError" type="error" :closable="false" />
              </div>
            </div>
          </div>
          
          <div class="operation-section">
            <el-input
              v-model="sm2Input"
              type="textarea"
              :rows="4"
              placeholder="请输入要加密/解密的文本"
            />
            <div class="button-group">
              <el-button type="primary" @click="handleSm2Encrypt">
                加密
              </el-button>
              <el-button type="success" @click="handleSm2Decrypt">
                解密
              </el-button>
            </div>
            <el-input
              v-model="sm2Result"
              type="textarea"
              :rows="4"
              placeholder="结果"
              readonly
            />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import CryptoJS from 'crypto-js'
import { sm2 } from 'sm-crypto'

const activeTab = ref('md5')
const md5Input = ref('')
const md5Result = ref('')
const sm2Input = ref('')
const sm2Result = ref('')
const publicKey = ref('')
const privateKey = ref('')
const publicKeyError = ref('')
const privateKeyError = ref('')

// MD5加密
const handleMd5Encrypt = () => {
  if (!md5Input.value) {
    ElMessage.warning('请输入要加密的文本')
    return
  }
  md5Result.value = CryptoJS.MD5(md5Input.value).toString()
}

// 生成SM2密钥对
const generateKeyPair = () => {
  const keypair = sm2.generateKeyPairHex()
  publicKey.value = keypair.publicKey
  privateKey.value = keypair.privateKey
  ElMessage.success('密钥对生成成功')
}

// SM2加密
const handleSm2Encrypt = () => {
  if (!sm2Input.value) {
    ElMessage.warning('请输入要加密的文本')
    return
  }
  if (!validatePublicKey()) {
    return
  }
  try {
    const encryptData = sm2.doEncrypt(sm2Input.value, publicKey.value)
    sm2Result.value = encryptData
    ElMessage.success('加密成功')
  } catch (error) {
    ElMessage.error('加密失败：' + error.message)
  }
}

// SM2解密
const handleSm2Decrypt = () => {
  if (!sm2Input.value) {
    ElMessage.warning('请输入要解密的文本')
    return
  }
  if (!validatePrivateKey()) {
    return
  }
  try {
    const decryptData = sm2.doDecrypt(sm2Input.value, privateKey.value)
    sm2Result.value = decryptData
    ElMessage.success('解密成功')
  } catch (error) {
    ElMessage.error('解密失败：' + error.message)
  }
}

// 验证公钥格式
const validatePublicKey = () => {
  if (!publicKey.value) {
    publicKeyError.value = '公钥不能为空'
    return false
  }
  if (!/^[0-9a-fA-F]+$/.test(publicKey.value)) {
    publicKeyError.value = '公钥格式错误，应为16进制字符串'
    return false
  }
  publicKeyError.value = ''
  return true
}

// 验证私钥格式
const validatePrivateKey = () => {
  if (!privateKey.value) {
    privateKeyError.value = '私钥不能为空'
    return false
  }
  if (!/^[0-9a-fA-F]+$/.test(privateKey.value)) {
    privateKeyError.value = '私钥格式错误，应为16进制字符串'
    return false
  }
  privateKeyError.value = ''
  return true
}
</script>

<style scoped>
.encryption-container {
  padding: 20px;
}

.encryption-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.key-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.key-display {
  display: flex;
  flex-direction: column;
  gap: 10px;
  .key-label {
    font-size: 14px;
    color: #606266;
    margin-bottom: 5px;
  }
}

.operation-section {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.button-group {
  display: flex;
  gap: 10px;
}

.action-button {
  align-self: flex-start;
  min-width: 120px;
}
.key-hint {
  margin-top: -10px;
  margin-bottom: 10px;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
  color: #409EFF;
}

:deep(.el-tabs__nav-wrap::after) {
  display: none;
}

:deep(.el-tabs__item) {
  font-size: 16px;
  text-align: left;
}

:deep(.el-tabs__item.is-active) {
  color: #409EFF;
}
</style>